<template>
  <el-row id="Other">
    <el-col>
    <div class="othertitle">
      <img src="../../../assets/img/homeimg/home_icon_else@2x (1).png" alt />
      <span>其它</span>
    </div>
    <!--第一个模块联盟店销售排行-->
    <div class="othervipshop">
      <p>联盟店消费排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton">
          <ul>
            <li
              class="aa"
              :class="{red:changeRed == index}"
              @click="change1(index)"
              v-for="(list,index) in siYuan1"
              :key="index"
            >{{list.a}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData1"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="goodsName"
              show-overflow-tooltip
              label="店铺"
              width="140"
              align="center"
            ></el-table-column>
            <el-table-column prop="volume" label="成交量" sortable width align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              width="140"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="timeitemone" v-if="timeitemone">
        <div class="block">
          <p>组件值：{{ value14 }}</p>
          <el-date-picker
            id="timefivetime"
            v-model="value14"
            type="daterange"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="picker001"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <!--第二个模块热搜排行-->
    <div class="othervipshop">
      <p>热搜排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton2">
          <ul>
            <li
              class="aa"
              :class="{red:onchangeRed == index}"
              @click="change2(index)"
              v-for="(list,index) in siYuan2"
              :key="index"
            >{{list.a2}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData2"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="140"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="goodsName"
              show-overflow-tooltip
              label="热词"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="volume"
              label="搜索量"
              width="120"
              align="center"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
        <div class="timeitemtwo" v-if="timeitemtwo">
          <div class="block">
            <p>组件值：{{ value15 }}</p>
            <el-date-picker
              id="timefivetime"
              v-model="value15"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="picker002"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!--第三个模块热搜排行-->
    <div class="othervipshop">
      <p>会员商城消费排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton3">
          <ul>
            <li
              class="aa"
              :class="{red:onreadychangeRed == index}"
              @click="change3(index)"
              v-for="(list,index) in siYuan3"
              :key="index"
            >{{list.a3}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData3"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column prop="goodsName" label="会员" width align="center"></el-table-column>
            <el-table-column prop="volume" label="单量" sortable width align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
        <div class="timeitemthree" v-if="timeitemthree">
          <div class="block">
            <p>组件值：{{ value16 }}</p>
            <el-date-picker
              id="timefivetime"
              v-model="value16"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="picker003"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!--第四个模块热搜排行-->
    <div class="othervipshop">
      <p>会员联盟店消费排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton4">
          <ul>
            <li
              class="aa"
              :class="{red:onreadylistchangeRed == index}"
              @click="change4(index)"
              v-for="(list,index) in siYuan4"
              :key="index"
            >{{list.a4}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData4"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column prop="goodsName" label="会员" width="150" align="center"></el-table-column>
            <el-table-column prop="volume" label="单量" sortable width="110" align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              width="120"
              align="center"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
        <div class="timeitemfour" v-if="timeitemfour">
          <div class="block">
            <p>组件值：{{ value17 }}</p>
            <el-date-picker
              id="timefivetime"
              v-model="value17"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="picker004"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!--第五个模块复购率统计排行-->
    <div class="othervipshop">
      <p>复购率统计</p>
      <div class="othervipshop-news">
        <div class="other-table">
          <el-table
            :data="tableData5"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
            id="otherfive"
          >
            <el-table-column prop="goodsName" label="时间" width="100" align="center" height="40"></el-table-column>
            <el-table-column prop="volume" label="用户样本数量" width align="center" height="40"></el-table-column>
            <el-table-column
              prop="repeatPurchaseCount"
              label="用户复购量"
              width
              align="center"
              height="40"
            ></el-table-column>
            <el-table-column
              prop="repeatPurchaseRate"
              label="复购率"
              :formatter="formatter"
              align="center"
              height="40"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    </el-col><br/>
    <el-col>
      <div class="Integral-top">
      <img src="../../../assets/img/homeimg/home_icon_goods@2x (1).png" alt />
      <span>积分</span>
    </div>
    <div class="Integral-echarts">
      <div class="Integral-title">
        <span>联盟店走势</span>
        <div class="Integral-right">
          <div class="Integralthree">
            <el-radio-group v-model="radio" @change="labletwo">
              <el-radio :label="3">{{messageone}}</el-radio>
              <el-radio :label="6">{{messagetwo}}</el-radio>
            </el-radio-group>
          </div>
          <div class="Integralstring">
            <el-cascader
              :options="valueslist"
              :show-all-levels="false"
              size="mini"
              @change="handlechangeend"
            ></el-cascader>
          </div>
        </div>
      </div>

      <div class="Integral-item">
        <ul class="ullist">
          <li>
            <span style="background:rgb(221, 143, 141) "></span>
            <div>线上订单</div>
          </li>
          <li>
            <span style="background:rgb(47, 69, 84)"></span>
            <div>买单</div>
          </li>
          <li>
            <span style="background:rgb(97, 160, 168)"></span>
            <div>线上订单同比</div>
          </li>
          <li>
            <span style="background:rgb(212, 130, 101) "></span>
            <div>买单同比</div>
          </li>
        </ul>
      </div>
      <div class="Integral-list">
        <div id="Integralone" :style="{width:'1200px',height:'400px'}"></div>
      </div>
    </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "Other",
  name: "Integral",
  data() {
    return {
      messag: "",
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      siYuan1: [{ a: "近7天排行" }, { a: "近30天排行" }, { a: "自定义时间" }],
      siYuan2: [
        { a2: "近7天排行" },
        { a2: "近30天排行" },
        { a2: "自定义时间" }
      ],
      siYuan3: [
        { a3: "近7天排行" },
        { a3: "近30天排行" },
        { a3: "自定义时间" }
      ],
      siYuan4: [
        { a4: "近7天排行" },
        { a4: "近30天排行" },
        { a4: "自定义时间" }
      ],
      changeRed: -1,
      onchangeRed: -1,
      onreadychangeRed: -1,
      onreadylistchangeRed: -1,
      timeitemone: false,
      timeitemtwo: false,
      timeitemfour: false,
      value14: "",
      value15: "",
      value15: "",
      value16: "",
      value17: "",
      timeitemthree: false,
      index: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      valueslist: [
        {
          value: "sevenday",
          label: "近七天"
        },
        {
          value: "month",
          label: "近一个月"
        },
        {
          value: "threemonth",
          label: "90天"
        }
      ],
      radio: 3,
      messageone: "收入",
      messagetwo: "支出",
      Integralone: "",
      timeType: 1,
      income: true,
      expenditure: false,
      name: "",
      listname: "",
      listtime: "",
      listtime: "",
      series3: [
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
          // data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: "", //name
          type: "line",
          stack: "总量",
          data: [] //inname  big[0]
          // data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
          // data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
          // data: [320, 332, 301, 334, 390, 330, 320]
        }
      ]
    };
  },
  created() {
    this.getData();
    this.change4(0);
    this.change3(0);
    this.change2(0);
    this.change1(0);
    this.handlechangeend(0);
    this.iften();
    this.redio();
    this.getSecode();
    this.labletwo();
  },
  mounted() {
    this.otherGetDate();
    this.change1();
    this.change2();
    this.change3();
    this.change4();
    // this.index1();
    this.indexMethod();
    this.picker001();
    this.picker002();
    this.picker003();
    this.picker004();
    this.labletwo();
    this.handlechangeend();
  },
  activated() {
    this.getSecode();
  },
  methods: {
    otherGetDate(row, column) {
      if (row !== undefined) {
        return row.money;
      }
    },
    indexMethod(index) {
      return index + 1;
    },
    change4(index) {
      this.onreadylistchangeRed = index;
      this.index = index;
      var _that = this;
      if (index == 2) {
        _that.timeitemfour = true;
      } else {
        _that.timeitemfour = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "7",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData4 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员联盟消费排行加载失败");
        // });
    },
    change3(index) {
      this.onreadychangeRed = index;
      var _that = this;
      this.index = index;
      if (index == 2) {
        _that.timeitemthree = true;
      } else {
        _that.timeitemthree = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "6",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData3 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员商城消费排行执行失败");
        // });
    },
    change2(index) {
      this.onchangeRed = index;
      var _that = this;
      this.index = index;
      if (index == 2) {
        _that.timeitemtwo = true;
      } else {
        _that.timeitemtwo = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "5",
            sortType: "true"
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData2 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },
    change1(index) {
      
      this.changeRed = index;
      var _that = this;
      this.index = index;
      if (index == 2) {
        _that.timeitemone = true;
      } else {
        _that.timeitemone = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "4",
            sortType: "true"
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData1 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },
    picker004(value17) {
      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value17[0] + "~" + value17[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "7",
          sortType: true
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData4 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员联盟消费排行加载失败");
        // });
    },
    picker003(value16) {

      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value16[0] + "~" + value16[1];
      }

      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "6",
          sortType: true
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData3 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员商城消费排行执行失败");
        // });
    },
    picker002(value15) {
      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }

      if (this.index == 2) {
        _that.timeRange = value15[0] + "~" + value15[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "5",
          sortType: "true"
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData2 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },
    picker001(value14) {
      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value14[0] + "~" + value14[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "4",
          sortType: "true"
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData1 = data.data;
          } 
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },

    getData() {
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          { timeRange: "1", type: "8", sortType: "true" },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData5 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "失败执行");
        // });
    },
    redio(value) {
      var _that = this;
      var index;
      if (value == 3) {
        _that.income = true;
        _that.expenditure = false;
      }
      if (value == 6) {
        _that.income = false;
        _that.expenditure = true;
      }
    },
    iften(value) {
      var index;
      var _that = this;
      if (value == "sevenday") {
        _that.timeType = 1;
      }
      if (value == "month") {
        _that.timeType = 2;
      }
      if (value == "threemonth") {
        _that.timeType = 3;
      }
    },
    labletwo(value) {
      this.redio(value);
      this.iften(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryBusinessIntegral"),
        method: "get",
        params: this.$http.adornParams({
          timeType: _that.timeType,
          income: _that.income,
          expenditure: _that.expenditure
        })
      })
        .then(({ data }) => {
          var listingtime = [];
          var listingname = [];
          var listingitem = [];
          listingtime = data.data.time; //time
          data.data.list[0].map(item => {
            //name
            listingname.push(item.name);
          });
          //listingitem
          var listingbigone = []; //所有的income
          var type01 = [];
          var type02 = [];
          var type03 = [];
          var type04 = [];

          var listingbigtwo = []; //线上所有的expenditure
          var type05 = [];
          var type06 = [];
          var type07 = [];
          var type08 = [];

          data.data.list[0].map((item, index) => {
            //操做income
            // type01.push(item[0].income);
            // type02.push(item[0].income);
            // type03.push(item[0].income);
            // type04.push(item[0].income);
            type01.push(item.income);
            type02.push(item.income);
            type03.push(item.income);
            type04.push(item.income);
          });
          listingbigone[0] = type01;
          listingbigone[1] = type02;
          listingbigone[2] = type03;
          listingbigone[3] = type04;

          //listingbigone   所有的income 的集合处理
          this.series3[0].data = listingbigone[0];
          this.series3[1].data = listingbigone[1];
          this.series3[2].data = listingbigone[2];
          this.series3[3].data = listingbigone[3];

          //操作expenditure
          data.data.list[0].map((item, index) => {
            //操作expenditure
            // type05.push(item[0].expenditure);
            // type06.push(item[0].expenditure);
            // type07.push(item[0].expenditure);
            // type08.push(item[0].expenditure);
            type05.push(item.expenditure);
            type06.push(item.expenditure);
            type07.push(item.expenditure);
            type08.push(item.expenditure);
          });

          listingbigtwo[0] = type05;
          listingbigtwo[1] = type06;
          listingbigtwo[2] = type07;
          listingbigtwo[3] = type08;

          //listingbigtwo 所有的线上所有的expenditure 的集合处理
          this.series3[0].data = listingbigtwo[0];
          this.series3[1].data = listingbigtwo[1];
          this.series3[2].data = listingbigtwo[2];
          this.series3[3].data = listingbigtwo[3];

          this.series3.map((item, index) => {
            item.name = listingname[index];
          });

          if (data && data.code === 0) {
            this.Integralone.setOption({
              legend: {
                // data: listname
                data: listingname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                // data: listtime
                data: listingtime
              },
              series: this.series3
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handlechangeend(value) {
      var _that = this;
      this.iften(value);
      this.$http({
        url: this.$http.adornUrl("/home/queryBusinessIntegral"),
        method: "get",
        params: this.$http.adornParams({
          timeType: _that.timeType,
          income: _that.income,
          expenditure: _that.expenditure
        })
      })
        .then(({ data }) => {
          var listname = [];
          var listtime = [];
          var listitem = []
          listtime = data.data.time; //底部时间
          data.data.list[0].map(item => {
            listname.push(item.name);
          });
          // listitem\
          var big = [];
          var type1 = []; //线上订单呢的所哟有income
          var type2 = [];
          var type3 = [];
          var type4 = [];
          data.data.list.map((item, idx) => {
            type1.push(item[0].income);
            type2.push(item[0].income);
            type3.push(item[0].income);
            type4.push(item[0].income);
          });
          big[0] = type1;
          big[1] = type2;
          big[2] = type3;
          big[3] = type4;
          // this.series3[0].data = listitem;
          this.series3.map((item, idx) => {
            item.name = listname[idx];
            // item.data = listitem
          });
          this.series3[0].data = big[0];
          this.series3[1].data = big[1];
          this.series3[2].data = big[2];
          this.series3[3].data = big[3];
          if (data && data.code === 0) {
            // console.log(data);
            this.Integralone.setOption({
              legend: {
                data: listname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: listtime
              },
              series: this.series3
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    getSecode() {
      this.series3[0].data = [];
      this.Integralone = this.$echarts.init(
        document.getElementById("Integralone")
      );
      //绘制图表
      this.Integralone.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [] //name
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
          // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] time
        },
        yAxis: {
          type: "value"
        },
        series: this.series3
      });
    }
  }
};
</script>
<style scoped>
.a {
  cursor: pointer;
}
.aa {
  float: left;
}
.red {
  background: rgba(224, 224, 224, 1);
}
/* #Other {
  width: 100%;
  height: 924px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top: 24px;
} */
.othervipshop {
  width: 496px;
  height: 390px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  float: left;
  margin-top: 32px;
  margin-left: 28px;
}
.othervipshop > p {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 24px;
  text-align: center;
  margin-top: 34px;
}
.othervipshop-news {
  height: 315px;
  width: 100%;
  /* background: wheat; */
  margin-top: 16px;
}
.otherbutton {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton2 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton3 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton4 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.other-table {
  height: 279px;
  width: 100%;
  /* background: gray; */
}
.othertitle {
  width: 100%;
  height: 48px;
  background: rgba(242, 242, 242, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  line-height: 48px;
  padding-left: 20px;
}
.othertitle > img {
  width: 16px;
  height: 16px;
}
.othertitle > span {
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.otherbutton > ul {
  width: 100%;
  height: 100%;
}
.otherbutton2 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton3 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton4 > ul {
  width: 100%;
  height: 100%;
}
ul,
ol {
  list-style: none;
}
.otherbutton > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton2 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton3 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton4 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
#otherfive {
  margin-top: 64px;
}
#timefivetime {
  width: 100%;
}
.timeitemone {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemone > div {
  width: 496px;
  height: 390px;
}
.timeitemone > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemtwo {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemtwo > div {
  width: 496px;
  height: 390px;
}
.timeitemtwo > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemthree {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemthree > div {
  width: 496px;
  height: 390px;
}
.timeitemthree > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemfour {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemfour > div {
  width: 496px;
  height: 390px;
}
.timeitemfour > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
#Integral {
  width: 100%;
  height: 539px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top: 24px;
}
.Integral-top {
  width: 100%px;
  height: 48px;
  line-height: 48px;
  background: rgba(242, 242, 242, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  padding-left: 20px;
}
.Integral-top > img {
  width: 16px;
  height: 16px;
}
.Integral-top > span {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 32px;
  margin-left: 5px;
}
.Integral-echarts {
  width: 100%;
  height: 491px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-right: 1px solid rgba(255, 255, 255, 1);
}
.Integral-title {
  width: 1433px;
  height: 32px;
  /* background: wheat; */
  margin-left: 93px;
  margin-top: 40px;
  line-height: 40px;
}
.Integral-title > span {
  float: left;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 34px;
}
.Integral-right {
  width: 400px;
  height: 32px;
  float: right;
  /* background: gray; */
}
.Integralthree {
  width: 220px;
  height: 32px;
  float: left;
}
.Integralstring {
  float: left;
}
.Integral-list {
  width: 1200px;
}
.Integral-item {
  width: 260px;
  height: 350px;
  /* background: wheat; */
  float: right;
  margin-top: 66px;
}
ul,
ol {
  list-style: none;
}
.ullist {
  width: 100%;
}
.ullist > li {
  width: 100%;
  height: 30px;
  line-height: 16px;
}
.ullist > li > span {
  width: 16px;
  height: 16px;
  background: gray;
  float: left;
}
.ullist > li > div {
  text-align: left;
  margin-left: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
</style>